﻿@page "/datagrid/paging-api"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@*Hidden:Lines*@
@using BlazorDemos
@using blazor_griddata

@*End:Hidden*@

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowPaging="true" Height="365">
                <GridPageSettings PageCount="5" PageSizes="true"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>                   
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@*<div class="col-lg-3 property-section">
    <h4 style="margin-top:38px;">Properties</h4>

    <table id="property" style="width: 90%; height: 350px;">
        <tr>
            <td class="left-side" style="padding-right:15px;">Allow Paging</td>
            <td>
                <SfCheckBox ID="paging" Checked="true"></SfCheckBox>
            </td>
        </tr>

        <tr>
            <td class="left-side" style="padding-right:15px;">Page Size Mode</td>
            <td>
                <SfDropDownList ID="sizemode" Index="0" PopupWidth="110px" DataSource="@sizemode" Change="@ModeChange">
                    <DropDownListFieldSettings text="id" value="type"></DropDownListFieldSettings>
                </SfDropDownList>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;">Page Size</td>
            <td>
                <SfNumericTextBox id="pagesize" value="10" format="##" min="1" max="36"></SfNumericTextBox>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;">Page Count</td>
            <td>
                <SfNumericTextBox id="pagecount" value="2" format="##" min="1" max="4"></SfNumericTextBox>
            </td>
        </tr>
        <tr>
            <td class="left-side" style="padding-right:15px;">Current Page</td>
            <td>
                <SfNumericTextBox id="currentpage" value="1" format="##" min="1" max="17"></SfNumericTextBox>
            </td>
        </tr>
    </table>
</div>*@

@code{

    public List<OrdersDetails> GridData { get; set; }

    public class SizeMode
    {
        public string id { get; set; }

        public string type { get; set; }
    }

    private List<SizeMode> sizemode = new List<SizeMode>()
    {
        new SizeMode(){ id= "All", type= "All" },
        new SizeMode(){ id= "Root", type= "Root" },
    };

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }

    public void ModeChange(object args)
    {
        
    }
}
